<template>
  <div>
    <div style="float:left;margin:10px">
      <el-button size="mini" type="primary" @click="openAttributeDialog()">添加规格</el-button>
    </div>

    <el-table
            :data="attributeList"
            size="mini"
            border
            :header-cell-style="{background:'#f2f3f7', color: '#333', textAlign: 'center'}"
            style="width: 100%"
    >
      <el-table-column type="index" align="center" label="序号" width="50" :index="indexMethod" />
      <el-table-column prop="name" align="center" label="规格名称" width="100" />
      <el-table-column prop="value" label="规格值" />
      <el-table-column label="是否同步商户" width="120" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.synMerchant">
            <el-tag size="mini" type="success">是</el-tag>
          </div>
          <div v-else>
            <el-tag size="mini" type="danger">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" width="100" label="创建时间" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-link style="font-size: 13px;" type="primary" @click="editAttribute(scope.row)">编 辑<i class="el-icon-edit el-icon--right" /></el-link>
          <el-link style="margin-left: 10px;font-size: 13px;" type="primary" @click="delAttribute(scope.row.id)">删 除<i class="el-icon-delete el-icon--right" /></el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            small
            style="overflow: auto hidden; height: 32px;float:right;"
            :current-page="page.currPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
    />
    <el-dialog
            title="新增规格"
            :visible.sync="addAttributeDialog"
            :close-on-click-modal="false"
            width="30%"
            center
            @close="afterAttributeDialog()"
    >
      <el-form ref="attributeForm" class="normalForm" :rules="rulesList" :model="addAttributeEntity">
        <el-form-item label="规格名称" prop="name" label-width="120px">
          <el-input v-model="addAttributeEntity.name" size="small" placeholder="请输入规格名称" />
        </el-form-item>
        <!--                <el-form-item label="规格值" label-width="120px">-->
        <!--                    <el-input v-model="addAttributeEntity.value" placeholder="请输入备注"></el-input>-->
        <!--                </el-form-item>-->
        <el-form-item label="规格值" label-width="120px">
          <template>
            <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
              {{ tag }}
            </el-tag>
            <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            />
            <el-button v-else class="button-new-tag" size="mini" icon="el-icon-circle-plus-outline" @click="showInput">新增值</el-button>
          </template>
        </el-form-item>
        <el-form-item label="是否同步商家" label-width="120px" >
          <el-radio v-model="addAttributeEntity.synMerchant" :label="true">是</el-radio>
          <el-radio v-model="addAttributeEntity.synMerchant" :label="false">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="addAttributeMethod()">确 定</el-button>
        <el-button size="mini" @click="addAttributeDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { productAjax } from 'Ajax'
  const { listAttribute, addAttribute, delAttributeById, updateAttribute } = productAjax
  export default {
    name: 'ProductAttribute',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 单位list
        attributeList: [],
        // 添加单位
        addAttributeEntity: {synMerchant:false},
        dynamicTags: [],
        // 添加单位弹出层
        addAttributeDialog: false,
        // 打开dialog类型
        type: 'add',
        // 添加规格值的控制变量
        inputVisible: false,
        inputValue: '',
        queryData: {
          pageNum: 1,
          pageSize: 10
        },
        page: {
          currPage: 1,
          pageSize: 10,
          totalCount: 100
        },
        rulesList: {
          name: [{ required: true, message: '请输入规格名', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.getAttributeList()
    },
    methods: {
      getAttributeList() {
        this.loading = true
        listAttribute(this.queryData).then(response => {
          this.attributeList = response.list
          this.page.currPage = response.currPage
          this.page.pageSize = response.pageSize
          this.page.totalCount = response.totalCount
          this.loading = false
        })
      },
      pageSizeChange(val) {
        this.queryData.pageSize = val
        this.getAttributeList()
      },
      pageCurrentChange(val) {
        this.queryData.pageNum = val
        this.getAttributeList()
      },
      addAttribute(row) {
        this.type = 'add'
        this.addAttributeDialog = true
      },
      editAttribute(row) {
        this.type = 'edit'
        this.addAttributeEntity = JSON.parse(JSON.stringify(row))
        this.dynamicTags = this.addAttributeEntity.value.split('|')
        this.addAttributeDialog = true
      },
      delAttribute(id) {
        const _this = this
        delAttributeById({ attributeId: id }).then(response => {
          this.msgSuccess('删除成功')
          _this.getAttributeList()
        })
      },
      openAttributeDialog() {
        this.type = 'add'
        this.addAttributeDialog = true
      },
      addAttributeMethod() {
        if (this.dynamicTags.length === 0) {
          this.msgError('规格值不能为空')
          return
        }
        // 赋值规格值
        const attributeValues = this.dynamicTags.join('|')
        this.addAttributeEntity.value = attributeValues

        this.$refs['attributeForm'].validate((valid) => {
          if (valid) {
            const _this = this
            if (this.type === 'add') {
              addAttribute(this.addAttributeEntity).then(response => {
                this.msgSuccess('添加成功')
                this.addAttributeDialog = false
                _this.getAttributeList()
              })
            } else {
              updateAttribute(this.addAttributeEntity).then(response => {
                this.msgSuccess('更新成功')
                this.addAttributeDialog = false
                _this.getAttributeList()
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      afterAttributeDialog() {
        this.addAttributeEntity = {synMerchant:false}
        this.dynamicTags = []
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      },

      showInput() {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },

      handleInputConfirm() {
        const inputValue = this.inputValue
        if (this.isNotBlank(inputValue)) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      indexMethod(index) {
        return index + 1
      },
      isBlank(str) {
        if (str === '' || str == null || str === undefined) { // "",null,undefined
          return true
        }
        return false
      },
      isNotBlank(str) {
        if (this.isBlank(str)) {
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .tableBox{
    position: absolute;
    top: 50px;
    left: 0;
    background: #ffffff;
    z-index: 999;
    border: 1px solid;
    padding: 20px;
    width: 100%;
  }
  .normalForm >>> .el-form-item__label {
    font-weight:normal
  }
</style>
